<html>
<head>
<title>FeedGraph Chat Demo</title>
<script src="http://www.feedgraph.com/js/feedgraph.js"></script>
<script>

var msgsdiv = null;
var sayinput = null;
var usersdiv = null;
var you = "anonymous";
var users = new Object();
var targetUser = "ry";

function prettyTime(time) {

	var today = new Date();
	var time = new Date(time);

	if (today.toDateString() == time.toDateString()) {
		return time.toLocaleTimeString();
	}

	return time.toUTCString();
}

function updateOnUser(obj) {

	users[obj.Id] = true;

	showUsers();
}

function makeTargetCallback(u) {

	return function () { targetUser = u; startChat(); }
}

function showUsers() {

	usersdiv.innerHTML = "";	

	for (var user in users) {
		var u = user;
		var span = document.createElement("span");
		span.innerHTML = sanitize(user);
		span.addEventListener("click", makeTargetCallback(user));
		usersdiv.appendChild(span);
		usersdiv.appendChild(document.createElement("br"));
	}
}

function sentMessage(entry) {

	var obj = JSON.parse(entry.Id);

	if (obj.to == targetUser) {
		writeMessage("you: " + sanitize(obj.msg));
	}
}

function receivedMessage(entry) {

	var obj = JSON.parse(entry.Id);

	if (obj.from == targetUser) {
		writeMessage(sanitize(targetUser) + ": " + sanitize(obj.msg));
	}
}

function writeMessage(msg) {

	var span = document.createElement("span");
	span.innerHTML = msg;
	msgsdiv.appendChild(span);
	msgsdiv.appendChild(document.createElement("br"));
}

function init() {

	
	msgsdiv = document.getElementById("msgsdiv");
	sayinput = document.getElementById("sayinput");
	usersdiv = document.getElementById("usersdiv");

	feedgraph.put("/chat/USERS/signed_on", you);
	feedgraph.watch("/chat/USERS/signed_on", updateOnUser);

	startChat();
}

var watcherSent = null;
var watcherRecv = null;

function startChat() {

	if (watcherSent != null) {
		watcherSent.cancel();
	}

	if (watcherRecv != null) {
		watcherRecv.cancel();
	}

	msgsdiv.innerHTML = "<br><i>starting chat with " + sanitize(targetUser) + "...</i><br>";
	watcherRecv = feedgraph.watch("/chat/" + targetUser + "/received", receivedMessage);
	watcherSent = feedgraph.watch("/chat/" + you + "/sent", sentMessage);
}

function changeName() {

	feedgraph.put("/chat/USERS/signed_off", you); 

	you = document.getElementById("you").value;

	feedgraph.put("/chat/USERS/signed_on", you);
	feedgraph.putobj("/chat/" + you + "/sent", {"to":targetUser, "msg":you + " joined this chat"});
	feedgraph.putobj("/chat/" + targetUser + "/received", {"from":you, "msg":you + " joined this chat"});

	startChat();
}

function say() {

	feedgraph.putobj("/chat/" + targetUser + "/received", {"from": you, "msg": sayinput.value});
	feedgraph.putobj("/chat/" + you + "/sent", {"to": targetUser, "msg": sayinput.value});
	sayinput.value = "";
}

function sanitize(str) {

	if (!str) return "";

	return str.replace(/[<>]/g,"");
}

</script>
</head>
<body onload=init()>
<label>signed in as:</label>
<input id=you type=text value="anonyomous" onchange="changeName()"/>
<br><label>friends:</label>
<div id=usersdiv></div>
<br><label>messages:</label>
<div id=msgsdiv>
</div>
<label>say:</label>
<input id=sayinput type=text onchange="say()"/>
</body>
</html>
